import QtQuick 2.12
import QtQuick.Window 2.12
import "qrc:///FontAwesome/"
import "qrc:///Hippo"
/*
  一个简单的示例
  Text {
      text: "\uf038"
      font.family: FontAwesome.name
  }

  本示例演示如何在qml中使用IconFont图标
  1.加载字体图标，这一点在FontAwesome.qml中实现，并且声明为单例，全局保证实例化一次
  2.在FontAwesome官网中查看对应图标的字符值，设置即可
*/
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello Icon")


    GridView{
        id:gridView
        anchors.fill: parent

        model: listModel
        cellHeight:30
        cellWidth:60
        anchors.margins:10

        delegate: Rectangle{
            width: gridView.cellWidth-5
            height: gridView.cellHeight-5
            //鼠标进入时候改变边框的颜色
            border.color: btn.containsMouse ? "#66c2ff" : "black"
            border.width: 1
            radius: 2

            MouseArea{
                id:btn
                anchors.fill: parent
                hoverEnabled: true
                //图标的使用方法
                Text {
                    anchors.centerIn: parent
                    text:textVal
                    font.family: fontfamily == 0 ? FontAwesome.name : Hippo.name
                    font.pixelSize:20
                    //鼠标按下时候改变图标的颜色
                    color: btn.pressed ? "#66c2ff" : "black"
                }
            }
        }
    }

    ListModel{
        id:listModel
        ListElement{fontfamily:0;textVal:"\uf038";name:"下箭头"}
        ListElement{fontfamily:0;textVal:"\uf24e";name:"天平"}
        ListElement{fontfamily:0;textVal:"\uf1ec";name:"计算器"}
        ListElement{fontfamily:0;textVal:"\uf1e2";name:"地雷"}
        ListElement{fontfamily:0;textVal:"\uf188";name:"Bug"}
        ListElement{fontfamily:0;textVal:"\uf189";name:""}
        ListElement{fontfamily:0;textVal:"\uf190";name:""}
        ListElement{fontfamily:0;textVal:"\uf191";name:""}
        ListElement{fontfamily:0;textVal:"\uf192";name:""}
        ListElement{fontfamily:0;textVal:"\uf193";name:""}
        ListElement{fontfamily:0;textVal:"\uf194";name:""}
        ListElement{fontfamily:0;textVal:"\uf195";name:""}
        ListElement{fontfamily:0;textVal:"\uf196";name:""}
        ListElement{fontfamily:0;textVal:"\uf197";name:""}
        ListElement{fontfamily:0;textVal:"\uf198";name:""}
        ListElement{fontfamily:0;textVal:"\uf199";name:""}

        ListElement{fontfamily:1;textVal:"\ue66c";name:""}
    }
}
